<template>
<div class="btn-config">
  <div class="block">
    <div>
       <div class="title">{{promtMap[form.type].name}}按钮</div>
       <div class="tip">{{promtMap[form.type].tip}}</div>
    </div>
    <el-switch
      v-model="form.enable"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>
  </div>

  <div class="title">自定义按钮名称</div>
  <el-input v-model="form.name" maxlength="20" :placeholder="promtMap[form.placeholder]" @blur="changeName"></el-input>
  <template v-if="form.type === 'back'">
    <div class="title">回退节点</div>
    <el-select v-model="form.backType" placeholder="请选择" class="width-full">
      <el-option label="上一个节点" value="last"></el-option>
      <el-option label="可选节点" value="choose"></el-option>
    </el-select>

    <el-select v-if="form.backType === 'choose'" v-model="form.backActivities" value-key="id" multiple placeholder="请选择" class="width-full" style="margin-top: 12px">
      <el-option
        v-for="item in task"
        :key="item.id"
        :label="item.name"
        :value="item">
      </el-option>
    </el-select>
  </template>
  <template v-if="form.type === 'assign'">
    <div class="title">转派范围</div>
    <optionalScope
      :isCheckbox="true"
      :tabs="tabs"
      :value="form.assignTo">
    </optionalScope>
    <!-- <el-checkbox v-model="form.assignGroup" style="margin-top: 8px;margin-right: 5px">允许选择到某个组织</el-checkbox>
     <el-tooltip popper-class="config-tooltip" effect="dark" placement="left-end">
      <div slot="content">当勾选该选项后，在手动指派时，允许不选择某个具体的成员，将工单指派给某个组织中让人领取</div>
      <i class="V7_iconfont V7_iconV7tubiao_bangzhu-20"></i>
    </el-tooltip> -->
  </template>
  <div class="block">
    <div>
       <div class="title">确认弹窗</div>
       <div class="tip">开启后，当点击后，会有弹窗确认</div>
    </div>
    <el-switch
      v-model="form.popChat"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>
  </div>
  <template v-if="form.popChat">
    <div class="title">弹窗文字</div>
    <el-input v-model="form.chatText" placeholder="填写弹框文字"></el-input>
    <template v-if="form.type !== 'contactCustomer' && form.type !== 'contactAssignee'">
      <div class="title">弹窗备注</div>
      <el-select v-model="form.remarkType" placeholder="请选择" class="width-full">
        <el-option label="备注必填" :value="0"></el-option>
        <el-option label="备注选填" :value="1"></el-option>
        <el-option label="无需备注" :value="2"></el-option>
      </el-select>
    </template>
  </template>
  <div class="oper-btn">
    <el-button type="primary" size="mini" @click.stop="saveBtnConfig">保存</el-button>
  </div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import optionalScope from '../../components/optionalScope.vue'
import { CommonModule } from '@/store/modules/common'
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore'
import { commonAction, handleData } from '@/utils/common'
@Component({
  components: {
    optionalScope
  }
})
export default class extends Vue {
  @Prop({ default: {} }) private form!: any
  @Prop({ default: [] }) private taskShapeList!: any

  private promtMap = Object.freeze({
    complete: {
      name: '提交',
      tip: '当点击该按钮，将保存该节点的数据更改，并流转到下一节点',
      placeholder: '默认按钮名称为提交'
    },
    update: {
      name: '提交',
      tip: '当点击该按钮，将保存该节点的数据并且更改',
      placeholder: '默认按钮名称为更新'
    },
    cancel: {
      name: '取消订单',
      tip: '当点击该按钮，将取消工单然后流程终止，不再进行流转',
      placeholder: '默认按钮名称为取消订单'
    },
    assign: {
      name: '转派',
      tip: '当点击转派后，将该节点修改的数据进行保存并交由其他处理人处理',
      placeholder: '默认按钮名称为转派'
    },
    contactAssignee: {
      name: '联系处理人',
      tip: '点击按钮，将调用系统，外呼工单处理[成员]的电话号码；若未设置对应成员的电话号码，则按钮点击无效，若未有明确的成员为工单处理人，则按钮隐藏。',
      placeholder: '默认按钮名称为联系处理人'
    },
    contactCustomer: {
      name: '联系客户',
      tip: '点击按钮，将调用系统，外呼工单[联系客户-联系人]的联系电话，若未设置对应的[关联客户]或关联的联系电话，则按钮点击无效',
      placeholder: '默认按钮名称为联系客户'
    },
    terminal: {
      name: '终止',
      tip: '当点击终止后，将该节点修改的数据进行保存然后流程终止，不再进行流转',
      placeholder: '默认按钮名称为终止'
    },
    back: {
      name: '回退',
      tip: '当点击回退后，将该节点修改的数据进行保存并推回至指定节点',
      placeholder: '默认按钮名称为回退'
    }
  })

  private get userList () {
    return (CommonModule as any).publicCache.userList.map(v => ({ name: `${v.agentName} 【${v.agentNumber}】`, _id: v._id }))
  }

  private get tabs () {
    return [
      {
        name: '成员',
        type: 'user',
        list: this.userList,
        listMap: (CommonModule as any).publicCache.userListObj,
        defaultProps: { id: '_id', name: 'name' }
      },
      {
        name: '技能组',
        type: 'technology',
        list: (CommonModule as any).publicCache.queueList,
        listMap: (CommonModule as any).publicCache.queueListObj,
        defaultProps: { id: '_id', name: 'name' }
      },
      {
        name: '服务组',
        type: 'service',
        list: busConfigStore.serviceList,
        listMap: busConfigStore.serviceMap,
        defaultProps: { id: 'id', name: 'name' }
      },
      {
        name: '部门',
        type: 'dept',
        list: (CommonModule as any).publicCache.departmentTree?.tree || [],
        listMap: (CommonModule as any).publicCache.departmentListObj,
        defaultProps: {
          children: 'children',
          label: 'name',
          name: 'name',
          id: '_id'
        }
      }
    ]
  }

  private get task () {
    return this.taskShapeList
  }

  private changeName () {
    if (!this.form.name) {
      this.$set(this.form, 'name', this.promtMap[this.form.type].name)
    }
  }

  private saveBtnConfig () {
    this.$emit('saveBtnConfig', this.form)
  }

  private beforeMount () {
    if (!busConfigStore.serviceList.length) {
      commonAction({
        url: '/server-work/action/serviceGroup/listAll',
        method: 'post'
      }).then(res => {
        if (res.success) {
          handleData(res.data.serviceGroupList, 'service')
        }
      })
    }
  }
}
</script>
<style>
.config-tooltip {
  max-width: 200px;
}
</style>
<style scoped lang="stylus">
.oper-btn {
  text-align: right;
  position: fixed;
  bottom: 0px;
  background-color: #fff;
  padding-right: 24px;
  padding-bottom: 12px;
  z-index: 20;
  width: 472px;
}
.btn-config {
  padding: 24px 24px 50px 24px;
}
.block {
  display: flex;
  justify-content: space-between;
  align-items: center
  .tip {
    font-weight: 400;
    color: #303753;
  }
}
.title {
  font-weight: 400;
  color: #303753;
  margin-bottom: 8px
  margin-top: 24px
}
</style>
